<template>
  <div class="box">
    <JsContentTitle
      :pageTitle="state.pageTitle"
      :buttonData="state.buttonData"
    ></JsContentTitle>
    <div class="contentView">
      <JsTable
        :toolBar="state.toolBar"
        :total="state.totalCount"
        :dataSource="state.dataSource"
        :columns="state.columns"
        :refresh="state.refresh"
        @search="searchEvent"
      >
      <template #borrowed="scoped">
        <span>{{ scoped.row.borrowed==true ? '未借过' : '曾借过' }}</span>
      </template>
      
      </JsTable>
    </div>

    <el-dialog
      v-model="dialogVisible"
      title="借书"
      width="500"
      :before-close="handleClose"
    >
      <span>确认借阅？</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="sure"> 确认 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { getBookList, borrow } from '@/api/zhangsw'

let dialogVisible = ref(false)
const handleClose = () => {
  dialogVisible.value = false
}

const book = ref(null) as any
const sure = () => {
  borrow(book.value.id).then((res:any) =>{
    console.log(res)
    debugger
    dialogVisible.value = false
  })
}

onMounted(() => {
  state.value.refresh = 1 //刷新列表执行searchEvent方法
})

//搜索
const searchEvent = (params: any) => {
  //params包含page、pagesize、state.value.toolBar.form内容
  console.log(params)
  let config = {
    pageNum:params.page,
    pageSize:params.pageSize,
    bookName:params.bookname,
    author:params.author
  }

  getBookList(config).then((res:any) =>{
    console.log(res)
    state.value.dataSource = res.data.data
    state.value.totalCount = res.data.total
    state.value.refresh = 0 //重新置成0，否则下次刷新不执行
  })
}

//借阅书籍
const borrowbookEvent = (row: any) => {
  console.log(row)
  book.value = row
  dialogVisible.value = true
}

//重置
const resetEvent = () => {
  Object.keys(state.value.toolBar.form).forEach((key: string) => {
    state.value.toolBar.form[key] = ''
  })
  state.value.refresh = 1
}

const state = ref({
  buttonData: [],
  pageTitle: '借书',

  refresh: 0,
  totalCount: 0,
  columns: {
    props: [
      {
        name: '书名',
        key: 'name',
      },
      {
        name: '作者',
        key: 'author',
      },
      {
        name: '简介',
        key: 'synopsis',
      },
      {
        name: '出版时间',
        key: 'year_publication',
      },
      {
        name: '借阅状态',
        key: 'borrowed',
      },
    ],
    options: {
      width: 200,
      btns: [
        {
          label: '借阅书籍',
          key: 'edit',
          type: 'danger',
          event: borrowbookEvent,
        },
      ],
    },
  },
  dataSource: [],
  toolBar: {
    form: {
      bookname: '',
      autheor: '',
    },
    input: [
      {
        label: '书名',
        key: 'bookname',
        placeholder: '请输入',
        el: 'input', //输入框
      },
      {
        label: '作者名',
        key: 'author',
        placeholder: '请输入',
        el: 'input', //输入框
      },
    ],
    btns: [
      {
        label: '查询',
        icon: 'Search',
        event: searchEvent,
      },
      {
        label: '重置',
        event: resetEvent,
      },
    ],
  },
} as any)
</script>

<style lang="scss" scoped>
*::-webkit-scrollbar {
  display: none;
  width: 10px;
}
.box {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  .contentView {
    background-color: white;
    border-radius: 5px;
    height: calc(100vh - 144px);
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
</style>
